<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/versions' }">版本管理</el-breadcrumb-item>
          <el-breadcrumb-item>新建版本</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="版本名称" prop="versionName">
          <el-input
            v-model="ruleForm.versionName"
            placeholder="请输入版本名称"
            style="width:30%"
            maxlength="12"
          ></el-input>
        </el-form-item>
        <el-form-item label="版本描述" prop="versionDesc">
          <el-input v-model="ruleForm.versionDesc" placeholder="请输入版本描述" style="width:30%"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" prop="versionReleaseType">
          <el-radio-group v-model="ruleForm.versionReleaseType" @change="selectradio">
            <el-radio :label="1">立即发布</el-radio>
            <el-radio :label="2">定时发布</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择时间" prop="versionReleaseTime" v-if="radioTime">
          <el-date-picker
            v-model="ruleForm.versionReleaseTime"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="更新类型" prop="versionAndatoryType">
          <el-radio-group v-model="ruleForm.versionAndatoryType">
            <el-radio :label="2">必须更新</el-radio>
            <el-radio :label="1">选择更新</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import dateTime from '@/components/dateTime'
export default {
  data() {
    return {
      newTime: "", //获取当前时间
      dialogImageUrl: "",
      dialogVisible: false,
      radioTime: false, //选择时间
      resource: 1, //选择发布时间
      ruleForm: {
        versionName: "",
        versionDesc: "",
        versionReleaseTime: "",
        versionAndatoryType: 2,
        versionReleaseType: 1
      },
      rules: {
        versionName: [
          { required: true, message: "请输入版本名称", trigger: "blur" }
        ],
        versionDesc: [
          { required: true, message: "请输入版本描述", trigger: "change" }
        ],
        versionReleaseType: [
          {
            required: true,
            message: "请选择立即发布/定时发布",
            trigger: "change"
          }
        ],
        versionReleaseTime: [
          { required: true, message: "请选择推送时间", trigger: "change" }
        ],
        versionAndatoryType: [
          { required: true, message: "请选择更新类型", trigger: "change" }
        ]
      }
    };
  },
  created() {
    console.log("this.$route.query.versionId", this.$route.query.versionId);
    // console.log("获取当前时间",dateTime);
    if (
      this.$route.query.versionId == "" ||
      this.$route.query.versionId == null ||
      this.$route.query.versionId == undefined
    ) {
      return;
    } else {
      // 查看详情回显数据
      setTimeout(() => {
        this.$http.article
          .versionsGet({ yj_app_versionId: this.$route.query.versionId })
          .then(res => {
            this.ruleForm.versionName = res.result.versionName;
            this.ruleForm.versionDesc = res.result.versionDesc;
            this.ruleForm.versionReleaseTime = res.result.versionReleaseTime;
            this.ruleForm.versionReleaseType = res.result.versionReleaseType;
            this.ruleForm.versionAndatoryType = res.result.versionAndatoryType;
            if (res.result.versionReleaseType == 2) this.radioTime = true;
            else this.radioTime = false;
            console.log("获取版本详情", res);
          });
      });
    }
  },
  mounted() {
    //获取当前时间并打印
    var that = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf =
      new Date().getMinutes() < 10
        ? "0" + new Date().getMinutes()
        : new Date().getMinutes();
    let ss =
      new Date().getSeconds() < 10
        ? "0" + new Date().getSeconds()
        : new Date().getSeconds();
    that.newTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    console.log(that.gettime);
  },
  methods: {
    // 获取radio标签
    selectradio(val) {
      console.log("获取选中标签", val);
      if (val == 1) this.radioTime = false;
      else this.radioTime = true;
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("获取", this.ruleForm);
          if (this.$route.query.versionId) {
            var key = "versionId";
            var value = this.$route.query.versionId;
            this.ruleForm[key] = value;
            //如果类型为1传送当前日期
            if (this.ruleForm.versionReleaseType == "1") {
              console.log(' this.newTime', this.newTime)
              this.ruleForm.versionReleaseTime = this.newTime;
            }
            this.$http.article.addversions(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success(res.msg);
              this.$router.push("/home/versions");
            });
          } else {
            //如果类型为1传送当前日期

            if (this.ruleForm.versionReleaseType == "1") {
              this.ruleForm.versionReleaseTime = this.newTime;
            }
            this.$http.article.addversions(this.ruleForm).then(res => {
              if (res.code == 200) this.$message.success(res.msg);
              this.$router.push("/home/versions");
            });
          }
        } else {
          return false;
        }
      });
    }
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>